<!-- 标记区域 -->

<template>
  <div v-show="map_one.id" class="Secure-MapView-area-mouse" :style="mouseStyle" />
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MarkMouse',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixOne('map', 'map_')],

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 父组件视图
     */
    parentView() {
      return CORE.componentParent(this, 'MapView') || {}
    },

    /**
     * 鼠标的圆点样式
     */
    mouseStyle() {
      const { map_one: { left, top }, parentView: { scale = 1 } } = this
      const transform = `translate(-50%, -50%) scale(${1 / scale})`
      return { left: `${left}%`, top: `${top}%`, transform }
    },
  },
}
</script>
